<template>
  <div id="home">
      <v-header :title="title" :homemsg="msg" :run2="run2" :home="this"></v-header>
      <br>
    <h2>这是一个首页组件</h2>
    <button @click="run()">执行run方法</button>
    <br><br><br>
    <button @click="getData()">vue-resource请求数据</button>
    <br>
    <ul>
        <li v-for="item in list">
            {{item.title}}
        </li>
    </ul>
    <br><br>
    <button @click="getData2()">使用axios请求数据</button><br>
    <ul>
        <li v-for="item in list2">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';

//引入axios
import Axios from 'axios';

export default {
    data(){
        return{
            msg:'我是一个首页组件home',
            list:[],
            list2:[],
            title:'是不是傻'
        }
    },
    components:{
        'v-header':Header
    },
    methods:{
        run(){
            alert(this.msg);
        },
        getData(){
            //请求数据
            var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            this.$http.get(api).then((response)=>{
                console.log(response);
                //注意this的指向
                //这是一个数组
                this.list = response.body.result;
                console.log(this.list);
            },function(err){
                console.log(err);
            })
        },
        getData2(){
            var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            Axios.get(api).then((response)=>{
                console.log(response);
                this.list2 = response.data.result;
            },function(err){
                console.log(err);
            })
        },
        //父组件中的一个方法
        run2(data){
            alert('我是home组件的run2方法'+data);
        }
    },
    mounted(){
        //生命周期函数
        //添加这个之后不需要点击就可以出现数据
        this.getData();
        this.getData2();
    }

}
</script>
